<template>
	<view class="container" style="display: flex;flex-direction: column; align-items: center;">
		<image class="bg-img" src="/static/login-bg.png"></image>
		<view class="login-content">
			<view class="tips" @click="back">
				游客进入
			</view>
			<view class="logo">
				<image class="logo-img" src="../../static/logo1.png"></image>
			</view>
			<view class="login-btn-box">
				<view class="btn-box" v-if="isAgree">
					<u-button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" customStyle="border-color:#61DDC5; background: #61DDC5;width: 562rpx; height: 88rpx;border-radius: 44rpx;margin-top: 54rpx;margin-bottom: 24rpx;color: #fff;" color="#1c1c1e" text="本机号码一键登录"></u-button>
				</view>
				<view class="btn-box" v-else >
					<u-button class="login-btn"  @click="agree" customStyle="border-color:#61DDC5; background: #61DDC5;width: 562rpx; height: 88rpx;border-radius: 44rpx;margin-top: 54rpx;margin-bottom: 24rpx;color: #fff;" color="#1c1c1e" text="本机号码一键登录"></u-button>
				</view>
				<view class="btn-box">
					其他号码一键登录
				</view>
			</view>
			<view class="agreement">
				<u-checkbox-group placement="row" :value="[isAgree]" @change="checkboxChange">
					<u-checkbox size="24rpx" labelColor="#A2A2A2" label-size="24rpx" :name="true" active-color="#64D2D8" shape="circle" label="已阅读并同意"></u-checkbox>
					<view class="inline-flex agreement-item" @tap="xieyi">《用户服务协议》</view>和<view class="inline-flex agreement-item" @tap="zhengce">《隐私政策》</view>
				</u-checkbox-group>
			</view>
			
		</view>
		<tui-alert :show="show" @click="show=false">
			<view class="">
				请认真阅读用户协议及隐私政策
			</view>
		</tui-alert>
		<!-- <image class="login-img" src="../../static/logo1.png"></image> -->
<!--		<view class="login-title">清醺局</view>-->
		<!-- <view class="login-desc">拒绝无效社交，万事皆可组局</view>
		<u-button class="login-btn" v-if="needPhone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" customStyle="width: 562rpx; height: 88rpx;border-radius: 44rpx;margin-top: 54rpx;margin-bottom: 24rpx;color: #fff;" color="#1c1c1e" text="手机号快捷登入"></u-button>
		<u-button class="login-btn" v-else customStyle="width: 562rpx; height: 88rpx;border-radius: 44rpx;margin-top: 54rpx;margin-bottom: 24rpx;color: #fff;" color="#1c1c1e" text="手机号快捷登入" @click="toApply"></u-button>
		<u-button class="login-cancel" @click="handleCancel" customStyle="width: 562rpx;height: 88rpx;border-radius: 44rpx;margin-bottom: 24rpx;color: #333;" color="#F2F2F2" text="暂不登录"></u-button> -->
	</view>
</template>

<script>
	import { login, getUserInfo } from '../../config/api.js';
	import { to } from '../../config/utils.js';

	export default {
		data() {
			return {
				needPhone: false,
				isAgree:false,
				show:false
			}
		},
		methods: {
			xieyi() {
				uni.navigateTo({
					url:`/pages/mine/setting/customH5?weburl=https://web.guituke.com/service.html`
				})
			},
			// 跳转隐私政策
			zhengce() {
				uni.navigateTo({
					url:`/pages/mine/setting/customH5?weburl=https://web.guituke.com/policy.html`
				})
			},
			checkboxChange(val) {
				if (val[0]) {
					this.isAgree = true
				} else {
					this.isAgree = false
				}
			},
			back(){
				uni.navigateBack()
			},
			agree(){
				this.show=true
			},
			// 去报名
			toApply(_, phoneCode) {
				let params = {
					phoneCode
				};
				uni.showLoading({
					title: '登录中'
				})
				uni.login({
					success: async (loginRes) => {
						params.code = loginRes.code;
						const [err, data] = await to(login(params))
						if(err) {
							console.log(err, 'err');
							if(err?.code === 609) {
								this.needPhone = true;
								uni.showToast({
									title: err.msg || '登录异常，请重新点击登陆按钮获取手机号',
									icon: 'none'
								})
								return;
							}
							return;
						}
						const { code, msg, data: token } = data || {};
						if(code === 609) {
							this.needPhone = true;
							uni.showToast({
								title: msg || '登录异常，请重新点击登陆按钮获取手机号',
								icon: 'none'
							})
							return;
						}

						// 登录成功
						if(token) {
							uni.setStorage({
							  key:"token",
							  data: token
							})
              uni.$u.http.setConfig((config) => {
              	/* config 为默认全局配置*/
              	config.header = {
									...(config.header || {}),
              		Authorization: token,
              	};
              	return config
              })
							const [errUser, userInfoData] = await to(getUserInfo());
							if(errUser) return;
							if(userInfoData.success && userInfoData.data) {
								uni.setStorage({
									key: 'userInfo',
									data: JSON.stringify(userInfoData.data)
								})
							}
							uni.navigateBack();
						}

					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			getPhoneNumber(e) {
				if(e.detail.code) {
					this.toApply('', e.detail.code);
				} else {
					uni.showToast({
						title: e.errMsg || '获取手机号失败'
					})
				}
			},
			handleCancel() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.container{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
	.bg-img{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		right: 0;
	}
	.login-content{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.5);
		.tips{
			position: absolute;
			right: 70rpx;
			top: 160rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
		.logo{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 600rpx;
			.logo-img{
				position: relative;
				width: 200rpx;
				height: 200rpx;
				border-radius: 38rpx;
			}
		}
		.login-btn-box{
			position: relative;
			.btn-box{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				text-align: center;
				font-size: 40rpx;
			}
		}
		
	}
	
	.agreement{
		position: absolute;
		left: 0rpx;
		bottom: 0;
		right: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 60rpx 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #DCDCDC ;
		
		/* 《隐私政策》 */
		.agreement-item{
			position: relative;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF ;
			/* 及 */
			padding-bottom: 1rpx;
			border-bottom: 1px solid #25293B;
			box-sizing: border-box;
			white-space: nowrap;
		}
	}
	
}
.login-img {
	width: 168rpx;
	height: 168rpx;
	border-radius: 24rpx;
	margin-top: 214rpx;
}
.login-title {
	font-size: 32rpx;
	color: #000;
	font-weight: bold;
	margin-top: 24rpx;
	margin-bottom: 18rpx;
	text-align: center;
}
.login-desc {
	font-size: 28rpx;
	color: #aaa;
	text-align: center;
}
.login-btn {}
.login-cancel {
	color: #333;
}

</style>
